<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>大事件-后台首页</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <!-- 导入bootstrap的js文件 -->
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="sider">
      <a href="#" class="logo"><img src="images/logo02.png" alt="logo"/></a>
      <div class="user_info">
        <img src="images/2.jpg" alt="person" />
        <span>欢迎&nbsp;&nbsp;李思思</span>
        <b>管理员</b>
      </div>
      <!-- 左侧导航栏 -->
      <div class="menu">
        <div class="level01 active">
          <a href="./main_count.html" target="main_url"
            ><i class="iconfont icon-yidiandiantubiao04"></i
            ><span>首页</span></a
          >
        </div>

        <div class="level01">
          <a href="./article_list.html" target="main_url"
            ><i class="iconfont icon-icon-article"></i><span>文章管理</span
            ><b class="iconfont icon-arrowdownl"></b
          ></a>
        </div>

        <ul class="level02">
          <li>
            <a href="./article_list.html" target="main_url"
              ><i class="iconfont icon-previewright"></i
              ><span>文章列表</span></a
            >
          </li>
          <li>
            <a href="./article_release.html" target="main_url"
              ><i class="iconfont icon-previewright"></i
              ><span>发表文章</span></a
            >
          </li>
          <li>
            <a href="./article_category.html" target="main_url"
              ><i class="iconfont icon-previewright"></i
              ><span>文章类别管理</span></a
            >
          </li>
        </ul>

        <div class="level01">
          <a href="./comment_list.html" target="main_url"
            ><i class="iconfont icon-comment"></i><span>评论管理</span></a
          >
        </div>
        <div class="level01" id="user">
          <a href="./user.html" target="main_url"
            ><i class="iconfont icon-user"></i><span>个人中心</span></a
          >
        </div>
      </div>
      <!-- 顶部栏 -->
      <div class="header_bar">
        <div class="user_center_link">
          <a href="./user.html" target="main_frame">个人中心</a>
          <img src="images/2.jpg" alt="person" />
          <a href="javascript:void(0)" class="logout"
            ><i class="iconfont icon-tuichu"></i> 退出</a
          >
        </div>
      </div>
      <!-- 右侧主体内容 -->
      <div class="main" id="main_body">
        <!-- 8.准备容器，存放页面 -->
        <iframe
          src="./main_count.html"
          style="height: 100%; width: 100%;"
          name="main_url"
        ></iframe>
      </div>
    </div>
  </body>
</html>

<script>
  $(function () {
    // 3.由于token要获取多次  设置ajax全局属性，可以给当前页面的ajax请求共同使用
    // $.ajaxSetup({
    //   beforeSend: function (xhr) {
    //     xhr.setRequestHeader('Authorization', localStorage.getItem('token'))
    //   }
    // })
    // 1.发起ajax请求获取用户数据
    $.ajax({
      url: 'http://localhost:8080/api/v1/admin/user/info',
      // 2.从本地数据取token  给ajax  设置在请求头
      // headers: {
      //   Authorization: localStorage.getItem('token')
      // },
      success: function (backData) {
        console.log(backData)
        // 4.更改页面数据
        $('.user_info span').html(`欢迎&nbsp;&nbsp;${backData.data.nickname}`)
        $('.user_info img, .user_center_link img').attr(
          'src',
          backData.data.userPic
        )
      },

      // 6.监听是否非法入侵
      error: function (xhr, status, err) {
        console.log(xhr)
        console.log(status)
        console.log(err)
        // 7.非法入侵时弹出提示界面，退回登入界面
        if (err == 'Forbidden') {
          alert('请先登入账号')
          window.location = './login.html'
        }
      }
    })

    // 5.点击退出  返回登录页面
    $('.logout').on('click', function () {
      // 6.删除token
      localStorage.removeItem('token')
      alert('退出成功')
      window.location = './login.html'
    })

    // 9.一级菜单点击事件
    $('.level01').on('click', function () {
      // 10.对应菜单高亮
      $(this)
        .addClass('active')
        .siblings('.level01')
        .removeClass('active')

      // 11.点击文章管理时，切换下拉菜单
      if ($(this).index() == 1) {
        $('.level02').slideToggle()

        // 15.默认亮第一个文章列表
        $('.level02 li').removeClass('active')
        $('.level02 li')
          .eq(0)
          .addClass('active')
        // 12.箭头转动
        $('.icon-arrowdownl').toggleClass('rotate0')
      } else {
        // 13.点击其他一级菜单，收回文件管理二级菜单  箭头也跟着回去
        $('.level02').slideUp()
        $('.icon-arrowdownl').removeClass('rotate0')
      }
    })

    // 14.二级菜单点击高亮
    $('.level02 li').on('click', function () {
      $(this)
        .addClass('active')
        .siblings()
        .removeClass('active')
    })
  })
</script>
